<template>
  <div class="animate-fadeIn">
    <div class="mb-6">
      <h2 class="text-2xl font-bold cyber-text mb-2">创建任务</h2>
      <p class="text-gray-400">创建新的测试任务</p>
    </div>
    
    <div class="glass-effect rounded-xl p-6 tech-card">
      <form @submit.prevent="handleSubmit" class="space-y-6">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">任务名称</label>
            <input 
              v-model="formData.name"
              type="text" 
              required
              class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all" 
              placeholder="输入任务名称"
            >
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">任务类型</label>
            <select 
              v-model="formData.type"
              class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all"
            >
              <option value="功能测试">功能测试</option>
              <option value="性能测试">性能测试</option>
              <option value="安全测试">安全测试</option>
              <option value="兼容性测试">兼容性测试</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">优先级</label>
            <select 
              v-model="formData.priority"
              class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all"
            >
              <option value="高">高</option>
              <option value="中">中</option>
              <option value="低">低</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">执行设备</label>
            <select 
              v-model="formData.device"
              class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all"
            >
              <option value="服务器-001">服务器-001</option>
              <option value="服务器-002">服务器-002</option>
              <option value="测试集群">测试集群</option>
            </select>
          </div>
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-300 mb-2">任务描述</label>
          <textarea 
            v-model="formData.description"
            rows="4" 
            class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all" 
            placeholder="描述任务目标和要求"
          ></textarea>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">计划开始时间</label>
            <input 
              v-model="formData.scheduledTime"
              type="datetime-local" 
              class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all"
            >
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">预计执行时长（分钟）</label>
            <input 
              v-model.number="formData.estimatedDuration"
              type="number" 
              class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all" 
              placeholder="分钟"
            >
          </div>
        </div>

        <!-- 测试用例选择 -->
        <div>
          <label class="block text-sm font-medium text-gray-300 mb-2">关联测试用例</label>
          <div class="border border-gray-600 rounded-lg bg-gray-800/50 p-4 max-h-64 overflow-y-auto">
            <div class="space-y-2">
              <div 
                v-for="testCase in availableTestCases"
                :key="testCase.id"
                class="flex items-center space-x-3 p-2 hover:bg-gray-700/50 rounded"
              >
                <input 
                  v-model="selectedTestCases"
                  :value="testCase.id"
                  type="checkbox"
                  class="text-tech-blue focus:ring-tech-blue"
                >
                <div class="flex-1">
                  <div class="text-white font-medium">{{ testCase.name }}</div>
                  <div class="text-gray-400 text-sm">{{ testCase.description }}</div>
                </div>
                <span 
                  class="px-2 py-1 text-xs rounded-full"
                  :class="getPriorityClass(testCase.priority)"
                >
                  {{ testCase.priority }}
                </span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="flex justify-end space-x-4">
          <router-link 
            to="/task/list"
            class="px-6 py-3 border border-gray-600 text-gray-300 rounded-lg hover:bg-gray-700 transition-colors"
          >
            取消
          </router-link>
          <button 
            type="submit" 
            class="cyber-button px-6 py-3 text-white rounded-lg hover-glow transition-all duration-200"
          >
            创建任务
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useTaskStore } from '@/stores/task'

interface TestCase {
  id: string
  name: string
  description: string
  priority: string
}

const router = useRouter()
const taskStore = useTaskStore()

const formData = reactive({
  name: '',
  type: '功能测试',
  priority: '中',
  device: '服务器-001',
  description: '',
  scheduledTime: '',
  estimatedDuration: 60
})

const selectedTestCases = ref<string[]>([])

const availableTestCases: TestCase[] = [
  { id: '1', name: '用户登录验证', description: '验证用户登录功能是否正常', priority: '高' },
  { id: '2', name: 'API响应时间测试', description: '测试API接口响应时间', priority: '中' },
  { id: '3', name: '数据库连接测试', description: '验证数据库连接稳定性', priority: '高' },
  { id: '4', name: 'UI界面兼容性', description: '测试不同浏览器兼容性', priority: '低' }
]

const getPriorityClass = (priority: string) => {
  switch (priority) {
    case '高':
      return 'bg-red-900/30 text-red-400'
    case '中':
      return 'bg-yellow-900/30 text-yellow-400'
    case '低':
      return 'bg-green-900/30 text-green-400'
    default:
      return 'bg-gray-900/30 text-gray-400'
  }
}

const handleSubmit = () => {
  const newTask = {
    name: formData.name,
    status: 'pending' as const,
    progress: 0,
    device: formData.device,
    type: formData.type,
    startTime: new Date().toLocaleString('zh-CN')
  }
  
  taskStore.addTask(newTask)
  
  console.log('创建任务:', {
    ...formData,
    selectedTestCases: selectedTestCases.value
  })
  
  alert('任务创建成功！')
  router.push('/task/list')
}
</script>

